<template>
	<page-meta>
		<navigation-bar title="乐居" background-color="#354e44" />
	</page-meta>
	<view class="cart">
		<evan-checkbox-group v-model="chooseList">
			<view class="cart-item" v-for="(item,index) in cartLsit" :key="item.id">
				<view class="cart-item-top">
					<evan-checkbox class="cart-item-top-checkbox" shape="square" :label="index"></evan-checkbox>
					<view class="cart-item-top-right">
						<image class="cart-item-top-right-img" :src="item.productPic"></image>
						<view class="cart-item-top-right-text">
							<view class="cart-item-top-right-text-info">{{item.productName}}</view>
							<view class="cart-item-top-right-text-info">编号:{{item.productSkuId}}</view>
							 <view class="cart-item-top-right-text-info">价格:¥{{item.price}}</view>
							<view class="cart-item-top-right-text-info">数量:{{item.quantity}}</view>

						</view>
					</view>
				</view>
				<view class="cart-item-bottom">
					<view @tap="subNum(item,index)" class="cart-item-bottom-operate">-</view>
					<view class="cart-item-bottom-operate">{{item.quantity}}</view>
					<view @tap="addNum(item)" class="cart-item-bottom-operate">+</view>
				</view>
			</view>
		</evan-checkbox-group>

		<view class="cart-bottom">
			<view class="cart-bottom-checkbox">
				<text class="cart-bottom-checkbox-text">全选</text>
				<evan-checkbox shape="square" class="cart-bottom-checkbox-box" v-model="allIsCheck"></evan-checkbox>
			</view>
			<view class="cart-bottom-all">
				合计:¥
				<view class="cart-bottom-all-price">{{allAmount}}</view>
			</view>
			<view @tap="pay" class="cart-bottom-pay">结算</view>
		</view>
	</view>
</template>

<script>
	import {
		showTip
	} from '../../../utils/index.js'
	import {
		addPreOrder as addPreOrderApi,
		delCartItems as delCartItemsApi,
		productDetail as productDetailApi
	} from '../../../api/common/index.js'
	import {
		findAllCartItem as findAllCartItemApi
	} from '../../../api/user/index.js'
	export default {
		data() {
			return {
				cartLsit: [],
				chooseList: []
			}
		},
		onLoad() {
			this.getCartList();
		},
		computed: {
			allAmount() {

				return this.chooseList.reduce((total, ele, index) => {
					return total + this.cartLsit[index].quantity * this.cartLsit[index].price;
				}, 0)
			},
			//全选和选不选
			allIsCheck: {
				get() {
					return this.chooseList.length == this.cartLsit.length && this.chooseList.length != 0;
				},
				set(value) {
					if (value) {
						this.chooseList = this.cartLsit.map((ele, index) => index);
					} else {
						this.chooseList = [];
					}
				}
			}
		},
		methods: {
			//购买数量减去1
			subNum(item, index) {
				var that = this;
				if (item.quantity == 1) {
					uni.showModal({
						content: '是否删除该商品',
						success(res) {
							if (res.confirm) {
								var ids = [];
								ids.push(item.id);
								delCartItemsApi(ids)
									.then(res => {
										that.cartLsit.splice(index, 1);
									})
							} else {
								showTip('您取消删除该商品了!')
							}
						}
					})
				} else
					item.quantity--;
			},
			addNum(item) {
				item.quantity++;
			},
			//结算
			pay() {
				if (this.chooseList.length == 0) {
					showTip('请先选择一件商品', 'error');
					return;
				}
				var orderItemList = this.chooseList.map((ele, index) => {
					var obj = {
						"cartId": this.cartLsit[index].id,
						"productId": this.cartLsit[index].productId,
						"productQuantity": this.cartLsit[index].quantity,
						"productSkuId": this.cartLsit[index].productSkuId
					}
					productDetailApi(this.cartLsit[index].productId)
						.then(res => {
							// console.log('商品性情', res);
							var skuList = res.data.product.skuList;
							var idx = skuList.findIndex(ele => ele.id == this.cartLsit[index].productSkuId);
							// console.log('当前商品的库存数目', skuList[idx].stock);
							if (this.cartLsit[index].quantity > skuList[idx].stock) {
								var message =`您购买的商品:${this.cartLsit[index].productName},型号${skuList[idx].spData}:,当前库存仅为${skuList[idx].stock},购买失败`;
								// console.log('message', message);
								showTip(message, 'none', 2000)
								return ;
							}
						})
					return obj;
				});
				var toDelCart = this.chooseList.map((ele, index) => this.cartLsit[index].id);
				addPreOrderApi({
						orderItemList: orderItemList
					})
					.then(res => {
						uni.setStorageSync('toDelCart',toDelCart)
						// console.log('生成订单结果', res);
						// console.log(res.data.orderId);
						uni.setStorageSync('orderId',res.data.orderId)
						uni.navigateTo({
							url:`../../productDetail/confirmOrder/confirmOrder?orderId=${res.data.orderId}`
						})
					})



			},



			//获取购物车列表
			getCartList() {
				findAllCartItemApi()
					.then(res => {
						this.cartLsit = res.data.items;
						console.log('购物车详情', this.cartLsit);
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cart {
		box-sizing: border-box;
		padding: 30rpx 40rpx 150rpx;
		width: 100%;
		height: 100%;
		min-height: 100vh;
		background-color: #f1ece7;

		&-item {
			width: 100%;
			height: 236rpx;
			box-sizing: border-box;
			padding: 10px 0;
			padding-left: 10rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			margin-bottom: 40rpx;

			&-top {
				display: flex;
				width: 100%;
				height: 136rpx;
				
				align-items: center;
				&-right {
					display: flex;
					margin-left: 10rpx;
					flex: 1;

					&-img {
						display: block;
						width: 120rpx;
						height: 136rpx;
						margin-right: 10rpx;
					}

					&-text {
						display: flex;
						flex-direction: column;
						font-size: 27rpx;
						color: #8d8d8d;

						&-info:first-child {
							color: #333;
							font-weight: 500;
						}
					}
				}
			}

			&-bottom {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				padding-right: 20rpx;

				&-operate {
					background-color: #f1ece7;
					padding: 0 20rpx;
					height: 60rpx;
					line-height: 60rpx;
					border-radius: 30rpx;
				}

				&-operate:nth-child(2) {
					margin: 0 15rpx;
					padding: 0 30rpx;
				}

			}


		}

		&-bottom {
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 0 60rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: #FFFFFF;
			z-index: 10;
			height: 150rpx;
			width: 100%;

			&-checkbox {
				display: flex;
			}

			&-all {
				flex: 1;
				text-align: right;
				margin-right: 5rpx;

				&-price {
					display: inline-block;
					color: red;
				}
			}

			&-pay {
				height: 80rpx;
				width: 200rpx;
				background-color: #354e44;
				color: #FFFFFF;
				text-align: center;
				line-height: 80rpx;
				border-radius: 20rpx;
			}

		}
	}
</style>
